.main{
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;

    flex-grow: 0;
    flex-shrink: 0;
    min-height: 100vh;
    background-color: white;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 10vh;
    background-color: rgb(240, 239, 199);
}

.home_page {
    border: none;
    background-color: rgb(211, 207, 158);
    border-radius: 5px;
    font-size: 20px;
    min-width: 10vw;
    text-align: center;
    line-height: 40px;
    height: 40px;
    margin-left: 5vw;
    margin-right: 1vw;
}

.home_page:hover {
    color:ivory ;
    background-color:rgb(145, 137, 64);
}

.title {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.title_symbol {

    background-image: url("img/informal_ess.png");
    overflow: hidden;
    width: 100px;
    margin: 7px;
    margin-bottom: 15px;
    margin-top: 15px;
}

#p_inf_title {
    font-size: 40px;
    color: rgb(79, 71, 47);
}

#search {
    display: flex;
    flex-direction: row;
    border:none ;
    min-width: 5vw;
    margin-right: 3vw;
}

.search[type="text"] {
    height: 3vh;
    width: 15vw;
}

.search[type="text"]+button {
    border: none;
    background-color: rgb(206, 211, 158);
    color: rgb(22, 22, 12);
    width: 5vw;
    height: 3.6vh;
}

.search[type="text"]+button:hover {
    background-color: rgb(145, 137, 64);
    color: ivory;
}

footer {
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 10vh;
    background-color: rgb(221, 175, 116);
}

footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 5vh;
}

footer>div:nth-child(2) {
    color: rgb(255, 255, 255);
}

.following {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#left_aside {
    /* flex属性依次包括flex_grow flex-shrink flex-basis */
    flex: auto auto 1 ;
    width: 5vw;
    background-color:none ;
    color:black ;
}

.l_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    position:fixed ;
    top: 21vh;
    left: 2.4vw;
}

.l_button> button {
    border: none ;
    background-color: rgb(199, 177, 77);
    border-radius: 30px;
    width: 35px;
    height: 35px;
    margin: 10px;
}

.l_button>button:hover {
    background-color: rgb(238, 240, 227);
}

.l_button> div {
    border: none;
    opacity: 0;
    margin-bottom: 20px;
    margin-top: 5px;
}

#center {
    /*flex:auto auto 2 ;*/
    display: flex;
    flex-direction: column;
    width: 70vw;
    /* background-color:  rgba(167, 133, 221, 0.822); */
    background-color: none ;
    padding: 3vh;
    margin-top: 0vh;
    margin-left: 3vw;
    margin-right: 0;
}

#right_aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex:auto auto 1 ;
    width: 25vw;
    background-color: none;
    margin-top: 3vh;
    border: none;
}

#three {
    position: sticky;
    top: 3vh;
    right: 10px;
}

.time {

    display: flex;
    flex-direction: column;
}

#time_img {
    position: absolute;
    border: none;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    background-image: url("img/star.png");
    background-size: contain;
    z-index: 1;
}

#time_text {
    border: none;
    background-color: rgb(241, 236, 211);
    margin-top: 2vh;
    margin-right: 20px;
    width: 18vw;
    height: 10vh;

    text-align: center;
}

#time_text>h2 {
    margin-top: 3vh;
}

.content {
    border: none;
    background-color: rgb(218, 217, 159);
    margin-top: 2vh;
    margin-right: 20px;
    width: 18vw;
    height: 24vh;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
}

.content>textarea {
    width: 15vw;
    height: 15vh;
    margin: 2px;
    margin-bottom: 0;
    resize: none;

    border: none;
    font-size: 18px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/*
.content>button {
    width: 15vw;
    height: 4vh;
    margin: bottom 8px;

    color: rgb(77, 65, 9);
    font-size: 20px;

    border: none;
    color: rgb(77, 65, 9);
    background-color: rgba(248, 244, 229, 0.904);
}

.content>button:hover {
    background-color: rgb(138, 108, 26);
    color: lightyellow;
}

*/

.essay {
    height: 400px;
}

.img_title {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

.p_img {
    width: 70px;
    height: 70px;
    background-image: url("img/decoration.png");
    background-size: contain;
}

.p_title {
    color: rgb(185, 159, 40);
}

.p{
    height: 300px;
    overflow-y:auto ;

}

.p>h2,h4 {
    color: rgb(128, 87, 0);
}

.p>p {
    text-indent: 2em;
}

/*
#board {
    border: none;
    background-color: rgb(180, 152, 93);
    margin-top: 2vh;
    margin-right: 20px;
    width: 17.5vw;
    height: 40vh;

    padding: 8px;
    padding-left: 0;

    word-wrap: break-word;
    word-break: normal;
    overflow-y: auto;
    overflow-x: hidden;

}

#board>ul {
    color: floralwhite;
    margin: 7px;
}

#board>p {
    position: relative;
    left:110px ;
    color: rgb(51, 44, 4);
}

#t {
    color: rgb(129, 101, 8);
}
*/


.butt {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.butt>input {
    width: 7.6vw;
    height: 4vh;
    margin: bottom 8px;

    /*
    color: rgb(75, 9, 77);
    */
    font-size: 20px;

    border: none;
    /*
    background-color: rgba(242, 229, 248, 0.904);
    */

    
    color: rgb(77, 65, 9);
    background-color: rgba(248, 244, 229, 0.904);
}

.butt>input:hover {
    /*
    background-color: rgb(119, 26, 138);
    color: lightyellow;
    */

    
    background-color: rgb(138, 108, 26);
    color: lightyellow;
}

#msg {
    border: none;
    /*
    background-color: rgb(180, 93, 180);
    */
    background-color: rgb(180, 152, 93);
    margin-top: 2vh;
    margin-right: 20px;
    width: 17.5vw;
    height: 40vh;

    padding: 8px;
    padding-left: 0;

    word-wrap: break-word;
    word-break: normal;
    overflow-y: auto;
    overflow-x: hidden;

}

#msg>p {
    position: relative;
    left:11px ;
    color: rgba(255, 255, 255, 0.938);
}

#t {
    color: rgb(129, 101, 8);
}





